<!DOCTYPE html>
<html lang="">
<head>
  <meta charset="utf-8">
	<title>Woop - Portfolio Template</title>
	<meta name="description" content="" />
  	<meta name="keywords" content="" />
	<meta name="robots" content="" />
	
	<link href='http://fonts.googleapis.com/css?family=Maven+Pro:700,900|Open+Sans:300italic,400italic,600italic,400,300,600' rel='stylesheet' type='text/css'>
	
	<link href="css/reset.css" rel="stylesheet" type="text/css" />
	<link href="css/960.css" rel="stylesheet" type="text/css" />
	<link href="css/styles.css" rel="stylesheet" type="text/css" />
	<link href="fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" />
	
	<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="js/smooth-scroll.js"></script>
	<script type="text/javascript" src="js/jquery.sticky.js"></script>
	<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
	<script type="text/javascript" src="js/jquery.easing-1.3.pack.js"></script>
	<script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
	<script type="text/javascript" src="cform.js"></script>
	
<script type="text/javascript"> // sticky nav bar 
  $(document).ready(function(){
    $("nav").sticky({topSpacing:0});
  });
</script>

<script type="text/javascript"> // fancybox
$(document).ready(function() {

	/* This is basic - uses default settings */
	
	$("a.single_image").fancybox();
	
	/* Using custom settings */
	
	$("a#inline").fancybox({
		'hideOnContentClick': true
	});

	/* Apply fancybox to multiple items */
	
	$("a.group").fancybox({
		'transitionIn'	:	'elastic',
		'transitionOut'	:	'elastic',
		'speedIn'		:	600, 
		'speedOut'		:	200, 
		'overlayShow'	:	false
	});
	
});
</script>
	
</head>

<div class="topbar"></div> <!-- top bar -->

<div id="intro">
	<div class="title">
		<h1>嘿，哥们<br />
		<span class="small">请叫我</span><br />
		<span class="name">笋</span><br />
		<span class="intro_line"></span><span class="amp">更重要的是</span><span class="intro_line"></span><br />
		<span class="small">我是一名网络工程师</span></h1>
	</div> <!-- end .title -->
</div> <!-- end #intro -->


<nav>
	<ul>
		<li><a href="#intro">主页</a></li>
		<li><a href="#work">工作成果</a></li>
		<li><a href="#services">技能</a></li>
		<li><a href="#about">我的介绍</a></li>
		<li><a href="#contact">联系方式</a></li>
	</ul>
</nav> <!-- end nav -->


<div id="work">
	<div class="container_16">
		
		<div class="subheader">
			<div class="subheader_line"></div><h2>最近工作成果</h2><div class="subheader_line"></div>
		</div>
		
		<div class="gallery">
			<div class="grid_5">
				<a href="img/example_img.png" class="single_image"><div class="screenshot1 ss"></div></a>
				<p>Website name<br />
				<span class="ss_text">Web Design / Development</span>
				</p>
			</div>
			<div class="grid_6">
				<a href="img/example_img.png" class="single_image"><div class="screenshot2 ss center"></div></a>
				<p>Website name<br />
				<span class="ss_text">Web Design / Development</span>
				</p>
			</div>
			<div class="grid_5">
				<a href="img/example_img.png" class="single_image"><div class="screenshot3 ss"></div></a>
				<p>Website name<br />
				<span class="ss_text">Web Design / Development</span>
				</p>
			</div>
		
			<div class="spacer">&nbsp;</div>
		
			<div class="grid_5">
				<a href="img/example_img.png" class="single_image"><div class="screenshot4 ss"></div></a>
				<p>Website name<br />
				<span class="ss_text">Web Design / Development</span>
				</p>
			</div>
			<div class="grid_6">
				<a href="img/example_img.png" class="single_image"><div class="screenshot5 ss center"></div></a>
				<p>Website name<br />
				<span class="ss_text">Web Design / Development</span>
				</p>
			</div>
			<div class="grid_5">
				<a href="img/example_img.png" class="single_image"><div class="screenshot6 ss"></div></a>
				<p>Website name<br />
				<span class="ss_text">Web Design / Development</span>
				</p>
			</div>
		</div><!-- end .gallery -->
		
	</div> <!-- end .container_16 -->
</div> <!-- end #work -->

<div class="work_bg_bottom"></div>

<div id="services">
	<div class="container_16">
	
		<div class="subheader">
			<div class="subheader_line"></div><h2>掌握技能</h2><div class="subheader_line"></div>
		</div>
		
		<div class="clear"></div>
		
		<div class="serv_icons">
			<div class="grid_4">
				<div class="serv_icon1"></div>
				<h3>设计</h3>
				<p>I have traced the Rebel spies to her. Now she is my only link to finding their secret base. I want to come with you to Alderaan.</p>
			</div>
		
			<div class="grid_4">
				<div class="serv_icon2"></div>
				<h3>发展</h3>
				<p>I have traced the Rebel spies to her. Now she is my only link to finding their secret base. I want to come with you to Alderaan.</p>
			</div>
		
			<div class="grid_4">
				<div class="serv_icon3"></div>
				<h3>特点</h3>
				<p>I have traced the Rebel spies to her. Now she is my only link to finding their secret base. I want to come with you to Alderaan.</p>
			</div>
			
			<div class="grid_4">
				<div class="serv_icon4"></div>
				<h3>wordpress</h3>
				<p>I have traced the Rebel spies to her. Now she is my only link to finding their secret base. I want to come with you to Alderaan.</p>
			</div>
		</div> <!-- end .serv_icons -->
		
	</div> <!-- end .container_16 -->
</div> <!-- end #services -->

<div class="services_bg_bottom"></div>

<div id="about">
	<div class="container_16">
	
		<div class="subheader">
			<div class="subheader_line"></div><h2>自我介绍</h2><div class="subheader_line"></div>
		</div>
	
	<div class="grid_5">
		<div class="about_pic"></div>
		<div class="social">
			<ul>
				<li><a href="#"><div class="twitter sprite"></div></a></li>
				<li><a href="#"><div class="facebook sprite"></div></a></li>
				<li><a href="#"><div class="linkedin sprite"></div></a></li>
				<li><a href="#"><div class="dribble sprite"></div></a></li>
			</ul>
		</div> <!-- end .social -->
	</div> <!-- end .grid_5 -->
	
	<div class="grid_6">
			<div class="about_copy">
			<h4>我是谁?</h4>
			<p>Kid, I've flown from one side of this galaxy to the other. I've seen a lot of strange stuff, but I've never seen anything to make me believe there's one all-powerful Force controlling everything.</p>
			<p>There's no mystical energy field that controls my destiny. It's all a lot of simple tricks and nonsense. Look, I ain't in this for your revolution, and I'm not in it for you.</p>
			<p>I want to come with you to Alderaan. There's nothing for me here now. I want to learn the ways of the Force and be a Jedi, like my father before me. Still, she's got a lot of spirit. I don't know, what do you think?</p>
		</div> <!-- end .about_copy -->
	</div> <!-- end .grid_6 -->
	
	<div class="grid_5">
		<div class="skills">
			<h4>Skills</h4>
			<ul>
				<li><div class="skill1"><p>jquery</p></div></li>
				<li><div class="skill2"><p>HTML5</p></div></li>
				<li><div class="skill3"><p>HTML/CSS</p></div></li>
				<li><div class="skill4"><p>Javascript</p></div></li>
				<li><div class="skill5"><p>Wordpress</p></div></li>
				<li><div class="skill6"><p>PHP/MySQL</p></div></li>
			</ul>
		</div> <!-- end .skills -->
	</div> <!-- end .grid_5 -->
	
	</div> <!-- end .container_16 -->
</div> <!-- end #about -->

<div class="about_bg_bottom"></div>

<div id="contact">
	<div class="container_16">
	
		<div class="subheader">
			<div class="subheader_line"></div><h2>联系方式</h2><div class="subheader_line"></div>
		</div>
		
		<div class="grid_7">
			<div class="contact_form">
				<h4>联系我</h4>
				<form method="post">
					<input type="text" name="Name" id="name" value="姓名" onfocus="this.value = this.value=='姓名'?'':this.value;" onblur="this.value = this.value==''?'姓名':this.value;" />
					<input type="text" name="Email" id="email" value="电子邮件" onfocus="this.value = this.value=='电子邮件'?'':this.value;" onblur="this.value = this.value==''?'电子邮件':this.value;" />
					<input type="text" value="主题" id="subject" onfocus="this.value = this.value=='主题'?'':this.value;" onblur="this.value = this.value==''?'主题':this.value;" />
					<textarea name="信息" id="body" onfocus="this.value = this.value=='信息'?'':this.value;" onblur="this.value = this.value==''?'信息':this.value;">信息</textarea>
					<input type="submit" name="submit" id="submit" value="发送" class="submit-button" onClick="return check_values();" />
				</form>
				<div id="confirmation" style="display:none; position: relative; z-index: 600; font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 16px; color: #4e4e4e;"></div>
			</div> <!-- end .contact_form -->
				
		</div> <!-- end .grid_7 -->
				
		<div class="grid_9">
		
			<div class="contact_info">
				<h4>联系信息</h4>
				<div class="grid_4 alpha">
					<p><img src="img/icn_phone.png" alt="" /> 15651720230</p>
					<p><img src="img/icn_mail.png" alt="" /> 863687084@qq.com</p>
				</div>
				<div class="grid_4 omega">
					<p><img src="img/icn_address.png" alt="" /> 江苏省-南京市-玄武区<br />
					<span class="address">玄武大道 699-32 号</span><br />
				</div>
			</div> <!-- end .contact_info -->
		
			<div class="map">
				<iframe class="map_frame" width="506" height="200" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.pt/maps?f=q&amp;source=s_q&amp;hl=pt-PT&amp;geocode=&amp;q=fifth+avenue+767+ny&amp;aq=&amp;sll=39.639538,-7.849731&amp;sspn=9.792035,19.753418&amp;ie=UTF8&amp;hq=&amp;hnear=767+5th+Ave,+New+York,+10022,+United+States&amp;t=m&amp;ll=40.763901,-73.973179&amp;spn=0.013002,0.043344&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe><br />
			</div> <!-- end .map -->
			
		</div> <!-- end .grid_9 -->
		
	</div> <!-- end .container_16 -->
</div> <!-- end #contact -->

<div class="contact_bg_bottom"></div>

<footer>
	<p>&copy; 2015 All rights reserved</p>
</footer>